<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="./js/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="warning.css?v=2020030512" />
		<title></title>
		<style>
			body {
			/* background-color: #203CF4; */
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.sui-list-item:last-child{
			background-image: none;
		}	
		
	</style>

	</head>

	<body>
		<header class="sui-bar sui-bar-nav top-box" style="height: 85px;box-shadow: 0px 2px 1px rgba(0,0,0,0.5)">
			<!-- <a class="sui-btn sui-pull-left" id="sui-back">
				<span class="sui-iconfont sui-icon-left"></span>
			</a> -->
			<div class="sui-title" style="height: 85px; line-height: 85px;">智慧水务系统</div>
			<div class="sui-pull-right" id="sui-back">
				<img src="img/menu.png" id="icon-menu"/>
			</div>
		</header>

		<div class="sui-wrap sui-flex-col back-box " id="datas">

			<div class="sui-content sui-padded-r-15  animated fadeInLeft" style="padding-top:1rem;padding-left: 0.75rem;" id="pannel3">
				<section class="sui-content background-box-2">
					<div class="box-info">
						<p class="box-info-title">今日新增预警数量</p>
						<div class="sui-content-padded sui-flex-col sui-flex-between">
							<span class="color-number">0</span>
							<span class="color-number">0</span>
							<span class="color-number">0</span>
							<span class="color-number">9</span>
						</div>
					</div>
				</section>
				<section class="sui-content background-box-2" style="margin-top: 1rem;">
					<div class="box-info">
						<p class="box-info-title">累计预警分析</p>
						<div id="chart1" style="width: 100%;height:6rem; "></div>
						<div class="" style="margin: 0rem 0.5rem;">
							<div class="sui-flex-col">
								<p class="point"></p>
								<p class="sui-padded-l-10 sui-flex-1">门禁</p>
								<p>2</p>
							</div>
							<div class="sui-flex-col sui-margin-t-5">
								<p class="point color-2"></p>
								<p class="sui-padded-l-10 sui-flex-1">水浸</p>
								<p>4</p>
							</div>
							<div class="sui-flex-col sui-margin-t-5">
								<p class="point color-3"></p>
								<p class="sui-padded-l-10 sui-flex-1">烟感</p>
								<p>1</p>
							</div>
						</div>
					</div>
				</section>
				<section class="sui-content background-box-2" style="margin-top: 1rem;">
					<div class="box-info">
						<p class="box-info-title">预警处理情况</p>
						<div id="chart2" style="width: 100%;height:6rem; "></div>
						<div style="margin: 0rem 0.5rem;">
							<div class="sui-flex-col">
								<p class="point"></p>
								<p class="sui-padded-l-10 sui-flex-1">门禁</p>
								<p>59%</p>
							</div>
							<div class="sui-flex-col sui-margin-t-5">
								<p class="point color-2"></p>
								<p class="sui-padded-l-10 sui-flex-1">水浸</p>
								<p>49%</p>
							</div>
							<div class="sui-flex-col sui-margin-t-5">
								<p class="point color-3"></p>
								<p class="sui-padded-l-10 sui-flex-1">烟感</p>
								<p>54%</p>
							</div>
						</div>
					</div>
				</section>
			</div>

			<div class="sui-content animated fadeIn sui-flex-1 sui-flex-row" style="padding-top: 10rem;">
				<div class="sui-flex-col sui-flex-between sui-flex-middle " >
					<div class="imgs-box animated fadeInLeft" @click="openWarningInfo(1)">
						<p>烟感预警</p>
						<p>今日新增：  0次</p>
						<img class="imgs" src="img/yg.png" />
					</div>
					<div class="imgs-box  animated fadeIn">
					   <img  class="img2"  src="img/warn_center.png" />
					</div>
					<div class="imgs-box animated fadeInRight" @click="openWarningInfo(2)">
						<p>水浸预警</p>
						<p>今日新增：  2次</p>
						<div class="waring-info sui-flex-col sui-flex-middle">
							<i class="iconfont icon-warning"></i>
							<span>2条新预警</span> 
						</div>
						<img  class="imgs" src="img/warn_sj_bj.png" />
					</div>	
				</div>
				<div class="sui-flex-col sui-flex-between sui-flex-center animated fadeInUp" >
					<div class="imgs-box" style="margin-top: -3rem;" @click="openWarningInfo(0)">
						<img  class="imgs" src="img/warn_mj.png" />
						<p style="margin-top: -2rem;">门禁预警</p>
						<p>今日新增：  2次</p>
					</div>
				</div>			
			</div>
			
			<div class="sui-content sui-padded-r-15 animated fadeInRight" style="padding-top:1rem;padding-right: 0.75rem;" id="pannel2">
				<div class="list-box sui-paded-b-15" >
					<h1>设备详情</h1>
					<p class="title">门禁设备</p>
					<div class="sui-flex-col">
						<span class="sui-flex-1">正常使用设备</span>
						<span>12</span>
					</div>
					<div class="sui-flex-col">
						<span class="sui-flex-1">异常设备</span>
						<span>0</span>
					</div>
					<p class="title">水浸传感</p>
					<div class="sui-flex-col">
						<span class="sui-flex-1">正常使用设备</span>
						<span>12</span>
					</div>
					<div class="sui-flex-col warning">
						<span class="sui-flex-1">异常设备</span>
						<span>1</span>
					</div>
					<p class="title">烟感设备</p>
					<div class="sui-flex-col">
						<span class="sui-flex-1">正常使用设备</span>
						<span>12</span>
					</div>
					<div class="sui-flex-col">
						<span class="sui-flex-1">异常设备</span>
						<span>0</span>
					</div>
				</div>
				
				<div class="list-box sui-margin-t-15">
					<h1>视频设备</h1>
					<p class="title">水浸传感</p>
					<div class="sui-padded-10">
						
						<img src="img/warn_sp.png" />
					</div>
					
					
				</div>	
			</div>


			<p class="top-info animated fadeInDown">安全预警</p>


		</div>


		<script type="application/javascript" src="lib/sui.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
		<script type="application/javascript" src="js/common.js"></script>
		<script type="application/javascript" src="js/vue.min.js"></script>
		<script type="application/javascript" src="warning.js"></script>


		<script type="text/javascript">
			//app.title = '环形图';
		</script>

	</body>

</html>
